<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html >
<title>注册</title>
<link href="CSS/style.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
    function check(){
        if(document.getElementById("form1").username.value==""){
            alert("请输入用户名！");
            document.getElementById("form1").username.focus();
            return false;
        }

        if(document.getElementById("form1").password.value==""){
            alert("请输入密码名！");
            document.getElementById("form1").password.focus();
            return false;
        }
    }
</script>
<body>
<br>
<center><h3 style="color:red;">${ msg }</h3></center>
<form id="form1" name="form1" method="post" action="${pageContext.request.contextPath }/RegisterServlet" onSubmit="return check()">
    <input type="hidden" name="method" value="register">
    <table width="371" height="230" border="0" align="center" cellpadding="0" cellspacing="0" background="images/register.jpg">
        <tr>
            <td height="50px" colspan="3" align="center" style="font-size: 32px">注册</td>
        </tr>
        <tr>
            <td width="53" align="center" valign="top" class="word_dark">&nbsp;</td>
            <td width="216" align="center" valign="top" class="word_dark">
                <table width="100%" height="100%">
                    <tr>
                        <span id="unts"></span>
                        <td>用户名：</td>
                        <td><input type="text" id="username" name="username" class="register" onblur="return validate()"></td>
                    </tr>
                </table>
            </td>
            <td width="94" valign="top" class="word_dark"></td>
        </tr>

        <tr>
            <td width="53" align="center" valign="top" class="word_dark">&nbsp;</td>
            <td width="216" align="center" valign="top" class="word_dark">
                <table width="100%" height="100%">
                    <tr>
                        <td>密&nbsp;&nbsp;码：</td>
                        <td><input type="password" name="password" class="register"></td>
                    </tr>
                </table>
            </td>
            <td width="94" valign="top" class="word_dark"></td>
        </tr>
        <tr>
            <td width="53" align="center" valign="top" class="word_dark">&nbsp;</td>
            <td width="216" align="center" valign="top" class="word_dark">
                <input name="Submit" type="submit" style="display: none" class="btn_bg" id="a1" value="注 册"><br>
            </td>
            <td width="94" valign="top" class="word_dark">
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    function validate() {
        var username = $("#username");
        $.ajax(
            {
                url: "/chatroom2/ValidateServlet?username="+username.val(),
                success: function (result) {
                 if(result==0){
                     $("#unts").html("<span style='color: red;position: relative;top: 15px;'>该用户已存在</span>")
                     $("#a1").css("display","none")
                 }else if(result==1) {
                     $("#unts").html("<span style='color: green;position: relative;top: 15px;'>可以注册</span>")
                     $("#a1").css("display","block")
                 }
                }
            }
        )
    }
</script>